<template>
  <div class="contentWrapper wpx1200" id="contentWrapper">
    <el-card class="box-card mt20" id="pdfDom" v-loading="loading">
		  <div slot="header" class="clearfix">
		    <span v-text="'任务名称:' + taskName"></span>
		    <span class="cursor lan" @click="editName(taskId)">编辑</span>
		  </div>
		  <div>
		  	<div class="sysIconWrapper wpx1200 clearFix">
					<ul>
						<li class="tupian">
							<p class="title">图片总数</p>
							<p class="num" v-text="result.length"></p>
						</li>
						<li class="guanjian">
							<p class="title">
								<span>扫描关键词</span>
								<!--<span class="lan cursor" @click="dialogVisible=true">修改</span>-->
							</p>
							<p class="num" v-text="imgKeyWordNum"></p>
						</li>
						<li class="yitupian">
							<p class="title">已扫描图片</p>
							<p class="num"  v-text="result.length"></p>
						</li>
						<li class="miangan">
							<p class="title">敏感词数</p>
							<p class="num" v-text="keyNum"></p>
						</li>
					</ul>
				</div>
				<div class="textarea ml30 overflowY" id="result" v-show="false"></div>
				<div class="sysIconWrapper mt50 pt50" v-show="keyNum!=0">
					计费说明：检测一张图片0.025元/张
				</div>
				<div class="sysIconWrapper noresult" v-show="keyNum==0">
					<img src="../../../../static/img/sys/yes.png" alt="" />
					暂未发现敏感词
				</div>
				<div class="sysIconWrapper">
					<div class="mt50 mb30 pb40 clearFix">
							<div class="floatr mr25">
								<!--<router-link to="/imgResultList" v-show="keyNum!=0">-->
									<el-button type="primary" size="small" @click="toResult" :disabled="disabledResult">查看报告</el-button>
								<!--</router-link>-->
							</div>
							<div class="floatl mr25" v-show="keyNum==0">
								<router-link to="/imgCheck">
									<!--<el-button type="primary" size="small" :disabled="disabled" @click="checkAgain">继续检测</el-button>-->
									<el-button type="primary" size="small">继续检测</el-button>
								</router-link>
							</div>
							<div class="floatl mr25"  v-show="keyNum!=0">
								<router-link to="/imgCheck">
									<el-button  size="small" >重新检测</el-button>
								</router-link>
							</div>
							<div class="floatr">
									<!--<el-button type="primary" size="small" @click="download">下载报告</el-button>-->
							</div>
					  </div>
				</div>
		  </div>
		</el-card>
		
			<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  :lock-scroll=false
		  width="400px">
		  <div class="pt40 pl40">
		  	<el-form ref="form" :model="form" label-width="88px">
					<el-form-item label="检测关键词:">
				    <el-select v-model="value5" multiple placeholder="请选择关键词"  @change = "selectChange()">
					    <el-option
					      v-for="(item,index) in selectlist"
					      :key="index"
					      :label="item.wordName"
					      :value="index">
					    </el-option>
					  </el-select>
				  </el-form-item>
				</el-form>
		  </div>
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
		
  </div>
</template>

<script>
	import API from "@/api"
export default {
  name: 'imgResult',
  data () {
    return {
    		form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
       },
			result:[],
			imgKeyWordNum:'',
			htmlTitle: '文图灵辨图片检测结果',
			keyNum:'',
			taskId:'',
			taskName: '',
			selectlist:[],
			value5:[],
			value5Clone:[],
			dialogVisible: false,
			dbcheck: false,
			list:[],
			loading: false,
			disabled: true,
			disabledResult: false
    }
  },
  created: function () {
  	this.checkData()
  },
  mounted: function(){
  	setMinHeight("contentWrapper")
  	this.getNum();
  		$(window).resize(function() {
		  setMinHeight("contentWrapper")
		});
	
  },
  beforeDestroy: function(){
	  	sessionStorage.setItem("setdata",'')
	},
  methods: {
  	toResult(){
  		this.$router.push({path: '/imgResultList', query: {id:this.taskId,taskName:this.taskName}})
  	},
  	checkAgain(){
    	var checkInfo = {
													info: {
														"img":JSON.parse(sessionStorage.getItem("imgArr")),
														"content":'',
														"wordList":sessionStorage.getItem("imgWordList"),
														"wordId":this.list.wordId,
														taskName: this.taskName
													},
													token: API.header.getCookie("token"),
													url: "checkImg"
												}
    	this.loading = true;
    	API.check.check(checkInfo).then(({data}) => {
				this.loading = false;
		       if(data.code=='0'){
		       		sessionStorage.setItem("imgResult",JSON.stringify(data.data))
		       		sessionStorage.setItem("imgWordList",checkInfo.info.wordList)
		       		sessionStorage.setItem("imgKeyWordNum",API.check.getKeyWordNum(this.list.wordTxt))
		       		sessionStorage.setItem("value5",JSON.stringify(this.value5))
    					sessionStorage.setItem("selectlist",JSON.stringify(this.selectlist))
		       		this.result == data.data;
		       		this.getNum();
		       }else{
						this.$message.error(data.msg);
		       }
	      })
  	},
  	selectChange(){
  	
  		if(JSON.stringify(this.value5Clone) != JSON.stringify(this.value5)){
  			this.disabled = false;
  		}else{
  			this.disabled = true;
  		}
			sessionStorage.setItem("value5",JSON.stringify(this.value5))
	  	var indexArr = this.value5;
	  	var selectArr = [];
	  	for(var i=0;i<indexArr.length;i++){
	  		selectArr.push(this.selectlist[indexArr[i]])
	  	}
	  	var newArr = {"wordTxt":"","wordName":"","wordId":""};
	  	for(var i=0;i<selectArr.length;i++){
	  		newArr.wordName += selectArr[i].wordName + " ";
	  		newArr.wordId += selectArr[i].wordId + " ";
	  		if(selectArr[i].wordTxt.substr(selectArr[i].wordTxt.length-1,1) == " " || selectArr[i].wordTxt.substr(selectArr[i].wordTxt.length-1,1) == " " ){
	  			newArr.wordTxt += selectArr[i].wordTxt.substr(0,selectArr[i].wordTxt.length-1) + " ";
	  		}else{
	  			newArr.wordTxt += selectArr[i].wordTxt + " ";
	  		}
	  	}
	  	newArr.wordTxt = newArr.wordTxt.substr(0,newArr.wordTxt.length-1);
	  	newArr.wordName = newArr.wordName.substr(0,newArr.wordName.length-1);
	  	newArr.wordId = newArr.wordId.substr(0,newArr.wordId.length-1);
	  	this.list = newArr;
	  	this.imgKeyWordNum = newArr.wordTxt.split(" ").length;
	  	sessionStorage.imgWordList = newArr.wordTxt;
	  	console.info(newArr)
  		if(this.value5.length==0){
  			this.disabled = true;
  			this.imgKeyWordNum =0;
  		}
	  },
  	download(){
  		API.check.download(API.header.getCookie("token"),"poi/downzip/" + this.taskId).then(({data}) => {
	       		window.open("http://47.106.160.27/sysfile/" + data,'_blank');
      })
  	},
  	editName(id){
// 		console.error(id)
   		this.$prompt('请输入新任务名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          lockScroll: false
        }).then(({ value }) => {
        	var checkInfo = {
        		token: API.header.getCookie("token"),
        		Obj:{
        			taskId:id,
        			taskName:value,
        		}
        	}
         	API.check.editTaskName(checkInfo).then(({data}) => {
			       if(data.code=='0'){
			       		this.taskName = data.data.taskName;
			       		this.$message.success("修改成功")
			       }else{
							this.$message.error(data.msg);
			       }
		      })
          
        }).catch(() => {});
   	},
	  checkData(){
	  		this.taskName = sessionStorage.getItem("imgTaskName");
	  		if(JSON.parse(sessionStorage.getItem("imgResult")).length!=0){
		  		var data = JSON.parse(sessionStorage.getItem("imgResult"))
					this.result = data
					this.taskId = data[0].taskId;
					this.value5 = JSON.parse(sessionStorage.getItem("value5"));
					this.value5Clone = JSON.parse(sessionStorage.getItem("value5"));
					this.selectlist = JSON.parse(sessionStorage.getItem("selectlist"));
		  	}else{
		  		this.result = JSON.parse(sessionStorage.getItem("imgArr"));
		  	}
	  		if(sessionStorage.getItem("imgWordList").length==0){
	  			this.imgKeyWordNum = 0;
	  		}else{
	  			this.imgKeyWordNum = sessionStorage.getItem("imgWordList").split(" ").length;
	  		}
	  		
	  	},
			getNum(){
				if(JSON.parse(sessionStorage.getItem("imgResult")).length==0){
					this.keyNum = 0;
					this.disabledResult = true;
					return false;
				}
				var arr = this.result;
				var that = this;
				var keywordArr = sessionStorage.getItem("imgWordList").replace(new RegExp('，','g'),',').split(" ");
				var html = '';
				$.each(arr, function(index,val) {
//					console.error(val.checkResult)
						for(var i=0;i<keywordArr.length;i++){
							if(keywordArr[i] !=''){
								html+=val.checkResult.replace(new RegExp(keywordArr[i],'g'),'<span class="bgwarn">' + keywordArr[i] + '</span>')
								if(val.checkResult.indexOf(keywordArr[i]) != -1){
									that.result[index].userId = true;
//									console.error(that.result)
								}
							}
			  		}					
				});
		  	document.getElementById("result").innerHTML = html;
		  	this.keyNum = document.getElementsByClassName("bgwarn").length;
		  	if(this.keyNum==0){
		  		this.disabled = true;
		  		
		  		//调用删除接口 taskid
//		  		var info = {
//      		token: API.header.getCookie("token"),
//      		id:this.taskId
//      	}
//		  		API.record.deleteRecord(info).then(({data}) => {
//			       if(data.code=='0'){
//								
//			       }else{
//								this.$message.error(data.msg);
//			       }
//		      })
		  		
		  	}
			}
			
	}
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.noresult {
		line-height: 59px;
    font-size: 19px;
    color: #999;
    margin-top: 50px;
	}
	.noresult img {
	    vertical-align: middle;
	    width: 25px;
	}
</style>
